<template>
	<!-- 自定义带渐变色的导航栏 -->
	<view class="customNav" :style="topConStyle">
		<u-navbar :title="title" bgColor='transparent' :fixed='fixed' :placeholder='placeholder' :autoBack="autoBack">
		</u-navbar>
	</view>
</template>

<script>
	export default {
		name: "navbar",
		props: {
			title: {
				type: String,
				default: '默认菜单名字-请修改'
			},
			placeholder: {
				type: Boolean,
				default: true
			},
			autoBack: {
				type: Boolean,
				default: true
			},
			fixed: {
				type: Boolean,
				default: false
			},
			height: {
				type: String,
				default: '336rpx'
			},
			background: {
				type: String,
				default: 'linear-gradient(180deg, rgba(68, 212, 168, 0) 0%, rgba(68, 212, 168, 0.3) 100%)'
			}
		},
		computed: {
			topConStyle() {
				return {
					position: 'absolute',
					width: '100%',
					zIndex: 1,
					height: this.height,
					background: this.background
				}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.customNav {
		transition: all 0.3s ease;
	}
</style>